<template>
	<div class="info">
			<BaseHeader title="个人信息" showBack="true" preventGoBack="true" backText="" rightTxt="保存" :back="back" :rightClick="save"></BaseHeader>
			<blur :blur-amount=40 :url="form.headimgurl" class="mtHeader">
		      	<p class="center" v-on:click="upload"><img :src="form.headimgurl"></p>
		      	<div class="tip" v-on:click="upload">点击修改头像</div>
		    </blur>
			<group label-width="7em">
		      	<x-input title="用户ID" disabled v-model="id" ></x-input>
		      	<x-input title="账号" disabled v-model="account" ></x-input>
		      	<x-input title="昵称" v-model="form.nickname" ref="nickname" :is-type="checkName" :min="2" :max="11" required></x-input>
		      	<checker v-model="form.sex" radio-required class="vux-x-input weui-cell" default-item-class="sex-item" selected-item-class="sex-item-selected">
					<div class="weui-cell__hd"><label class="weui-label" style="width: 7em;">性别</label></div>
					<div class="weui-cell__bd weui-cell__primary">
						<checker-item v-for="(item,index) in sexs" :key="index" :value="item.key"><label>{{item.value}}</label></checker-item>
					</div>
			    </checker>
			    <datetime v-model="form.birthday" title="出生日期" :min-year="minyear"></datetime>
		    </group>
		<simple-cropper :initParam="uploadParam" :successCallback="uploadHandle" ref="cropper"></simple-cropper>
	</div>
</template>
<script>
import {Blur,XInput,Group,Checker,CheckerItem,Datetime} from 'vux'
import BaseHeader from 'touch/components/common/header';
import Axios from 'touch/config/axios';

import SimpleCropper from 'touch/components/common/simple-cropper';

export default{
	components :{
		BaseHeader,
		Blur,
		Group,
		XInput,
		Group,
		Checker,
		CheckerItem,
		Datetime,
		SimpleCropper,
	},
	data () {
		return {
			id : '',
			account : '',
			sex : 2,
			form :{
				sex : 0,
				nickname : '',
				birthday : '',
				path: this.$route.path,
				headimgurl : this.Global.user.headimgurl,
			},
			sexs : [
				{key: 1, value: '男'},
				{key: 2, value: '女'}
			],
			minyear : 1840,
			onsave : false,
			checkName : function(value){
				var reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
				if(!reg.test(value)){
					return {
			          	valid: false,
			          	msg: '昵称只能输入中英文、数字'
			        }
				}
				return {valid: true}
			},
			uploadParam: { 
                scale: 1
            },
		}
	},
	methods:{
		back(){
			this.$router.go(-1);
		},
		//保存
		save(){
			if(!this.$refs.nickname.valid){return false;}
			if(this.onsave){return false;}
			this.onsave = true;
			Axios.Home.InfoSave(this.form)
	        .then(res =>{
	        	if(!res) return false;
            	this.Global.user.nickname = this.form.nickname;
            	this.Global.user.headimgurl = res.data.headimgurl;
            	this.back();
		        this.onsave = false;
	        })
		},
		//获取用户信息
		get(){
			this.$vux.loading.show({text: 'Loading'});
			Axios.Home.Info({path:this.$route.path})
	        .then(res =>{
	            var data = res.data;
	            this.id = data.id;
	            this.account = data.account;
	            this.form.nickname = data.nickname;
	            this.form.sex = data.sex,
	            this.form.birthday = data.birthday;
	            this.form.headimgurl = data.headimgurl;
	            this.$vux.loading.hide();
	        })
		},
		upload(e){
			this.$refs['cropper'].upload() 
		},
		uploadHandle (data) { 
            this.form.headimgurl = data;
        }
	},
	created: function(){
		this.get();
	}
}
</script>
<style>
	.info .weui-cells{margin-top: 0px;}
	.info .center {text-align: center; padding-top: 20px; color: #fff; font-size: 18px; }
	.info .center img {width: 100px; height: 100px; border-radius: 50%; border: 1px solid #ececec; }
	.info .sex-item {border: 1px solid #ececec; }
	.info .vux-checker-item {display: inline-block; border-radius: 100%; width: 16px; height: 16px; vertical-align: middle ;margin-left: 55px;}
	.info .vux-checker-item:first-child{margin-left: 0px;}
	.info .sex-item-selected {background-image: url('../../../assets/icon/round_check_fill.png');width:16px;height:16px; }
	.info .weui-cell__primary label{margin-left: 25px;margin-top: -5px;position: absolute;}
	.info .weui-cells a{text-decoration: none;}
	.info .m-l-25{margin-left: 25px;}
	.info .tip{text-align: center;color: #9c9696;}
	.info .file{position: absolute; margin-top: 20px; width: 120px; height: 180px; left: 50%; margin-left: -60px;}
</style>